<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <meta HTTP-EQUIV="Expires" CONTENT="0">
    <link href="../pic/logo.ico" rel="shortcut icon">
    <link rel="stylesheet" href="../lib/element/index.css">
    <link rel="stylesheet" href="../../node_modules/animate.css/animate.min.css">
    <link href="../lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../common/common.css">
    <title>项目主页</title>
</head>
<body>
<div class="container" id="app"  v-cloak>
    <mainnav>
        <el-row class="row" style="text-align: center;height: 60px;line-height: 60px;font-size: 25px;color: #20A0FF" slot="title">{{session.projectName}}</el-row>
        <el-popover ref="popover" placement="bottom" width="500" trigger="hover" slot="other">
            <el-row style="background-color: white;padding: 10px;font-size: 15px;word-break: break-all" class="row">
                Mock Server地址：{{mockUrl}}<br>
                Mock Js文件：<a href="../resource/net.js" target="_blank">net.js</a>（和内网测试是同一个文件，需要安装node环境，安装包点击下载：<a href="../resource/node.msi" target="_blank">window</a>&nbsp;&nbsp;<a href="../resource/node.pkg" target="_blank">mac</a>）<br>
                使用方法：在本地用node运行net.js ,加上mock server地址和你需要请求的真实地址的根地址，当您的接口文档的状态为开发完成的时候，net.js不会去请求mock server地址而去请求真实地址（举例：node net.js {{mockUrl}} http://localhost:8081) ,然后将您开发工程下的根地址替换为localhost:36742即可开启您的Mock之旅！
            </el-row>
        </el-popover>
        <el-button type="text"  style="font-size: 15px;height: 100%" slot="slot1" v-popover:popover>
            Mock
        </el-button>
        <el-button type="text"  style="font-size: 30px;width:40px;height: 60px" slot="slot2" title="管理项目" onclick="location.href='../projectset/projectset.html'" v-if="session.role==0">
            <i class="fa fa-cog fa-fw"></i>
        </el-button>
    </mainnav>
    <el-row class="row" style="margin: 20px 0 0 5px" id="body" :gutter="20">
        <el-col class="col" :span="6" style="min-height: 600px;background-color: white;box-shadow: 2px 2px 2px #888888;border-radius: 5px;margin: 0;padding: 0">
            <el-row class="row" style="height: 50px;background-color: #20A0FF;color: white;margin: 0;padding: 0" id="group">
                <el-col class="col" :span="6" style="line-height: 50px;text-align: center;font-weight: bold;font-size: 15px;padding: 0">
                    分组
                </el-col>
                <el-col class="col" :span="18" style="cursor: pointer;text-align: right;line-height: 50px;padding-right: 20px" title="添加分组" v-if="session.role==0" @click.native="addGroup">
                    <i class="el-icon-plus"></i>
                </el-col>
            </el-row>
            <interfacelist></interfacelist>
        </el-col>
        <el-col class="col" :span="18" id="info">
            <el-row class="row" v-if="preview==0 && interfaceEdit">
                <el-row class="row" style="background-color: white;border-radius: 5px;box-shadow: 0px 2px 2px #888888;padding: 15px 0" >
                    <el-row class="row" style="height: 50px;line-height: 50px">
                        <el-col class="col" :span="2" style="text-align: center;color: gray">
                            名称
                        </el-col>
                        <el-col class="col" :span="10" style="height: 50px;line-height: 50px;text-align: left">
                            <el-input style="width: 90%" placeholder="请输入接口名称" v-model="interfaceEdit.name"></el-input>
                        </el-col>
                        <el-col class="col" :span="2" style="text-align: center">
                            <el-popover ref="popover1" placement="bottom" title="修改信息" width="400" trigger="hover" :content="editInfo">
                            </el-popover>
                            <el-button type="text" v-popover:popover1 style="font-size: 20px">
                                <span class="fa fa-user"></span>
                            </el-button>
                        </el-col>
                        <el-col class="col" :span="1" style="text-align: left">
                        </el-col>
                        <el-col class="col" :span="3" style="height: 50px;line-height: 50px;text-align: left" id="editSave">
                            <el-button :loading="savePending" type="primary" style="width: 65%" @click="save" v-if="session.role==0">
                                保存
                            </el-button>
                        </el-col>
                        <el-col class="col" :span="3" style="height: 50px;line-height: 50px;text-align: left" id="editRun">
                            <el-button type="primary" style="width: 65%" @click="run">
                                运行
                            </el-button>
                        </el-col>
                        <el-col class="col" :span="3" style="height: 50px;line-height: 50px;text-align: left" id="preview">
                            <el-button type="primary" style="width: 65%" @click="changePreview(1)">
                                预览
                            </el-button>
                        </el-col>
                    </el-row>
                    <el-row class="row" style="height: 50px;line-height: 50px">
                        <el-col class="col" :span="2" style="text-align: center;color: gray">
                            路径
                        </el-col>
                        <el-col class="col" :span="10">
                            <el-popover placement="bottom" title="路径信息" width="500" trigger="focus" content="路径不包含baseUrl，baseUrl请前往右上角项目管理里面设置。例如http://abc.com/login,http://abc.com是baseUrl,这里输入/login即可,支持restful url形式，例如：/info/{name} 支持路径参数的粘贴，系统会自动识别路径和query参数">
                                <el-input style="width: 90%" placeholder="请输入接口路径(不包含BaseUrl)" v-model="interfaceEdit.url" slot="reference" @change="changeUrl" @paste.native="paste"></el-input>
                            </el-popover>
                        </el-col>
                        <el-col class="col" :span="2" style="text-align: center;color: gray">
                            方法
                        </el-col>
                        <el-col class="col" :span="10" style="text-align: center">
                            <el-select style="width: 80%;text-align: center" v-model="interfaceEdit.method" @input="changeMethod">
                                <el-option  value="GET"></el-option>
                                <el-option  value="POST"></el-option>
                                <el-option  value="PUT"></el-option>
                                <el-option  value="DELETE"></el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row class="row" style="height: 50px;line-height: 50px">
                        <el-col class="col" :span="2" style="text-align: center;color: gray">
                            分组
                        </el-col>
                        <el-col class="col" :span="10" style="text-align: left">
                            <el-select style="width: 90%;text-align: center" v-model="interfaceEdit.group._id">
                                <el-option v-for="item in interfaceList" :value="item._id" :label="item.name"></el-option>
                            </el-select>
                        </el-col>
                        <el-col class="col" :span="2" style="text-align: center;color: gray">
                            状态
                        </el-col>
                        <el-col class="col" :span="10" style="text-align: center">
                            <el-select style="width: 80%;text-align: center" v-model="interfaceEdit.finish">
                                <el-option  :value="0" label="开发中"></el-option>
                                <el-option  :value="1" label="开发完成"></el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row class="row" style="height: 90px;line-height: 90px;text-align: center">
                        <el-col class="col" :span="2" style="text-align: center;color: gray">
                            简介
                        </el-col>
                        <el-col class="col" :span="22" style="text-align: left">
                            <el-input type="textarea" :rows="3" style="width: 95%;vertical-align: middle" placeholder="请输入关于该接口的简介" v-model="interfaceEdit.remark"></el-input>
                        </el-col>
                    </el-row>
                </el-row>
                <el-row class="row" style="background-color: white;padding: 20px;margin-top: 15px;border-radius: 5px;box-shadow: 0px 2px 2px #888888;">
                    <el-tabs type="card">
                        <el-tab-pane :label="paramTab" v-if="param.length>0">
                            <restparam></restparam>
                        </el-tab-pane>
                        <el-tab-pane :label="queryTab">
                            <inparamquery></inparamquery>
                            <el-button size="small" type="primary" style="margin-top: 10px;margin-left: 10px" @click="importQuery">导入Query字符串</el-button>
                        </el-tab-pane>
                        <el-tab-pane :label="headerTab">
                            <inparamheader></inparamheader>
                            <el-button size="small" type="primary" style="margin-top: 10px;margin-left: 10px" @click="importHeader">导入HTTP Header字符串</el-button>
                        </el-tab-pane>
                        <el-tab-pane :label="bodyTab" v-if="interfaceEdit.method=='POST' || interfaceEdit.method=='PUT'">
                            <inparambody></inparambody>
                            <el-button size="small" type="primary" style="margin-top: 10px;margin-left: 10px" @click="importBody" v-if="bodyInfo.type==0">导入Body字符串</el-button>
                        </el-tab-pane>
                        <el-tab-pane label="Inject">
                            <inparaminject></inparaminject>
                        </el-tab-pane>
                    </el-tabs>
                </el-row>
                <el-row class="row" style="background-color: white;padding: 20px;margin-top: 15px;border-radius: 5px;box-shadow: 0px 2px 2px #888888;">
                    <el-tabs type="card">
                        <el-tab-pane label="Result">
                            <el-row class="row" style="padding:0 0 0 20px;height: 30px;line-height: 30px">
                                <el-radio class="radio" :label="0" v-model="outInfo.type"  id="outJson">JSON</el-radio>&nbsp;&nbsp;&nbsp;&nbsp;
                                <el-radio class="radio" :label="1" v-model="outInfo.type" id="outRaw">Raw</el-radio>
                            </el-row>
                            <outparam v-if="outInfo.type==0"></outparam>
                            <el-row class="row" style="height: 60px;line-height: 60px;" v-else>
                                <el-col class="col" :span="14" style="height: 100%;text-align: center">
                                    <el-input style="width: 90%" placeholder="请输入备注" v-model="outInfo.rawRemark"></el-input>
                                </el-col>
                                <el-col class="col" :span="10" style="text-align: center">
                                    <el-input type="textarea" :rows="2" style="width: 90%" placeholder="请输入Mock数据" v-model="outInfo.rawMock"></el-input>
                                </el-col>
                            </el-row>
                        </el-tab-pane>
                    </el-tabs>
                    <el-button type="primary" size="small" style="margin-top: 10px;margin-left: 20px" @click="importJSON" v-if="outInfo.type==0">
                        导入JSON
                    </el-button>
                    <span style="right: 50px;font-weight: bold;top: 25px;position: absolute"><a href="mockrule.html" style="color: #50a3ff;" target="_blank">mock规则</a></span>
                    <el-popover ref="popover2" placement="bottom" title="如何拖动" width="400" trigger="hover" content="Result列表的元素可以拖动，如果要把一个子元素拖动到顶层元素，则拖动到它所属的顶层Object或者Array类型元素上停留2秒，当颜色变为橘黄色的时候，松开即可！">
                    </el-popover>
                    <span style="left: 100px;font-size: 20px;top: 25px;position: absolute;color: #20A0FF" v-popover:popover2><i class="fa fa-question-circle"></i></span>
                </el-row>
                <el-row class="row" style="height: 100px">

                </el-row>
            </el-row>
            <el-row class="row" style="padding: 15px 10px 10px 0;background-color: white;font-size: 20px;font-weight: bold;" v-else-if="preview==1 && interfaceEdit">
                <el-row class="row" style="height: 50px;border-bottom: 1px gray solid">
                    <el-col class="col" :span="4">

                    </el-col>
                    <el-col class="col" :span="16" style="text-align:center;line-height: 50px;color: #20A0FF;font-size: 30px">
                        {{interfaceEdit.name}}
                    </el-col>
                    <el-col class="col" :span="4" style="text-align: center;line-height: 50px">
                        <el-button type="primary" style="width: 80%" v-if="session.role==0" @click="changePreview(0)">
                            返回
                        </el-button>
                        <el-button type="primary" style="width: 80%" v-else @click="run">
                            运行
                        </el-button>
                    </el-col>
                </el-row>
                <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff">
                    Method：
                </el-row>
                <el-row class="row" style="padding:0 30px;" :style="{color:methodColor(interfaceEdit.method)}">
                    {{interfaceEdit.method}}
                </el-row>
                <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff">
                    Path：
                </el-row>
                <el-row class="row" style="padding:0 30px;color: #ff1a27">
                    {{interfaceEdit.url}}
                </el-row>
                <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff">
                    开发状态：
                </el-row>
                <el-row class="row" style="padding:0 30px;">
                    {{interfaceEdit.finish?"开发完成":"开发中"}}
                </el-row>
                <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff">
                    描述：
                </el-row>
                <el-row class="row" style="padding:0 30px;">
                    {{interfaceEdit.remark?interfaceEdit.remark:"无"}}
                </el-row>
                <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff" v-if="param && param.length>0">
                    Restful Param:
                </el-row>
                <el-row class="row" style="padding:0 30px;" v-if="param && param.length>0">
                    <table style="width: 100%;font-size: 17px;border-collapse: collapse" border="1" bordercolor="#ddd">
                        <thead style="background-color: #50a3ff;color:white;text-align: center;vertical-align: middle">
                        <td style="width: 30%">
                            名称
                        </td>
                        <td style="width: 70%">
                            备注
                        </td>
                        </thead>
                        <tbody>
                        <template v-for="item in param">
                            <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                                <td style="width: 30%">
                                    {{item.name}}
                                </td>
                                <td style="width: 70%">
                                    {{item.remark?item.remark:"无"}}
                                </td>
                            </tr>
                        </template>
                        </tbody>
                    </table>
                </el-row>
                <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff" v-if="querySave.length>0">
                    Query:
                </el-row>
                <el-row class="row" style="padding:0 30px;" v-if="querySave.length>0">
                    <table style="width: 100%;font-size: 17px;border-collapse: collapse" border="1" bordercolor="#ddd">
                        <thead style="background-color: #50a3ff;color:white;text-align: center;vertical-align: middle">
                        <td style="width: 30%">
                            名称
                        </td>
                        <td style="width: 20%">
                            是否可选
                        </td>
                        <td style="width: 50%">
                            备注
                        </td>
                        </thead>
                        <tbody>
                        <template v-for="item in querySave">
                            <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                                <td style="width: 30%">
                                    {{item.name}}
                                </td>
                                <td style="width: 20%">
                                    {{item.must?"必选":"可选"}}
                                </td>
                                <td style="width: 50%">
                                    {{item.remark?item.remark:"无"}}
                                </td>
                            </tr>
                        </template>
                        </tbody>
                    </table>
                </el-row>
                <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff" v-if="headerSave.length>0">
                    Http Header:
                </el-row>
                <el-row class="row" style="padding:0 30px;" v-if="headerSave.length>0">
                    <table style="width: 100%;font-size: 17px;border-collapse: collapse" border="1" bordercolor="#ddd">
                        <thead style="background-color: #50a3ff;color:white;text-align: center;vertical-align: middle">
                        <td style="width: 30%">
                            Key
                        </td>
                        <td style="width: 30%">
                            Value
                        </td>
                        <td style="width: 40%">
                            备注
                        </td>
                        </thead>
                        <tbody>
                        <template v-for="item in headerSave">
                            <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                                <td style="width: 30%">
                                    {{item.name}}
                                </td>
                                <td style="width: 30%">
                                    {{item.value}}
                                </td>
                                <td style="width: 40%">
                                    {{item.remark?item.remark:"无"}}
                                </td>
                            </tr>
                        </template>
                        </tbody>
                    </table>
                </el-row>
                <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff" v-if="(interfaceEdit.method=='PUT' || interfaceEdit.method=='POST') && (bodySave.length>0 || bodyInfo.type==1)">
                    Body:
                </el-row>
                <el-row class="row" style="padding:0 30px;" v-if="(interfaceEdit.method=='PUT' || interfaceEdit.method=='POST') && (bodySave.length>0 || bodyInfo.type==1)">
                    <table style="width: 100%;font-size: 17px;border-collapse: collapse" border="1" v-if="bodyInfo.type==0" bordercolor="#ddd">
                        <thead style="background-color: #50a3ff;color:white;text-align: center;vertical-align: middle">
                        <td style="width: 30%">
                            名称
                        </td>
                        <td style="width: 20%">
                            类型
                        </td>
                        <td style="width: 20%">
                            是否可选
                        </td>
                        <td style="width: 30%">
                            备注
                        </td>
                        </thead>
                        <tbody>
                        <template v-for="item in bodySave">
                            <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                                <td style="width: 30%">
                                    {{item.name}}
                                </td>
                                <td style="width: 20%">
                                    {{item.type==0?"文本":"文件"}}
                                </td>
                                <td style="width: 20%">
                                    {{item.must?"必选":"可选"}}
                                </td>
                                <td style="width: 30%">
                                    {{item.remark?item.remark:"无"}}
                                </td>
                            </tr>
                        </template>
                        </tbody>
                    </table>
                    <div class="row" style="margin: 0;padding: 0" v-else>
                        <table style="width: 100%;font-size: 17px;border-collapse: collapse" border="1" bordercolor="#ddd">
                            <thead style="background-color: #50a3ff;color:white;text-align: center;vertical-align: middle">
                            <td style="width: 30%">
                                类型
                            </td>
                            <td style="width: 70%">
                                备注
                            </td>
                            </thead>
                            <tbody>
                            <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                                <td style="width: 30%">
                                    {{bodyInfo.rawType==0?"文本流":"二进制流"}}
                                </td>
                                <td style="width: 70%">
                                    {{bodyInfo.rawType==0?(bodyInfo.rawTextRemark?bodyInfo.rawTextRemark:"无"):(bodyInfo.rawFileRemark?bodyInfo.rawFileRemark:"无")}}
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="row" style="margin: 10px 0 0 0;padding: 0" v-if="bodyInfo.rawType==0 && bodyInfo.rawText">
                            <span style="font-size: 15px;">文本示例:</span>
                            <pre>{{bodyInfo.rawText}}</pre>
                        </div>
                    </div>
                </el-row>
                <el-row class="row" style="padding:0 10px;height: 50px;line-height: 50px;color: #50a3ff" v-if="(outInfo.type==0 && drawMix.length>0) || outInfo.type==1">
                    Result:
                </el-row>
                <el-row class="row" style="padding: 0 30px;">
                    <el-row class="row" v-if="outInfo.type==0 && drawMix.length>0">
                        <template v-for="item in drawMix">
                            <div class="row" style="font-size: 18px;min-height: 25px;line-height: 25px;margin: 0;padding: 0;background-color: #fff9e6;word-break: break-all" v-html="item">
                            </div>
                        </template>
                    </el-row>
                    <table style="width: 100%;font-size: 17px;border-collapse: collapse" border="1" v-if="outInfo.type==1" bordercolor="#ddd">
                        <thead style="background-color: #50a3ff;color:white;text-align: center;vertical-align: middle">
                        <td style="width: 20%">
                            类型
                        </td>
                        <td style="width: 50%">
                            备注
                        </td>
                        <td style="width: 30%">
                            Mock
                        </td>
                        </thead>
                        <tbody>
                        <tr style="text-align: center;vertical-align: middle;height: 40px;word-break: break-all">
                            <td style="width: 20%">
                                RAW
                            </td>
                            <td style="width: 50%">
                                {{outInfo.rawRemark?outInfo.rawRemark:"无"}}
                            </td>
                            <td style="width: 30%">
                                {{rawMock}}
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </el-row>
                <el-row class="row" style="height: 100px"></el-row>
            </el-row>
        </el-col>
    </el-row>
</div>
<script src="../../dist/vendor.bundle.js"></script>
<script src="../lib/element/index.js"></script>
<script src="../../dist/projectinfo.js"></script>
</body>
</html>